<template>
    <div id="container">
        <div v-if="question.qs_type == '单选题'">
            <div class="q-title"></div>
            <!-- {{ question.question }} -->
            <div class="qs-content">
                {{ question.index + 1 }}、{{ question.question.title }}({{ question.qs_type }})<br>
                <el-radio-group v-model="answer.singleAnswer"
                    @change="checked => handleChange(checked, question.question.id, question.qs_type, question.score)">
                    <el-radio v-for="(v, k, index) in JSON.parse(question.question.options)" :value="k" :key="index">
                        <span class="question-prefix">{{ k }}:</span>
                        <span class="q-item-span-content">{{ v }}</span>
                    </el-radio>
                </el-radio-group>
            </div>
        </div>
        <div v-if="question.qs_type == '多选题'">
            <div class="q-title">
                <!-- {{ question.question.title }} -->
            </div>
            <div class="qs-content">
                {{ question.index + 1 }}、{{ question.question.title }}({{ question.qs_type }})
                <el-checkbox-group v-model="answer.answerArray"
                    @change="checked => handleChange(checked, question.question.id, question.qs_type, question.score)">
                    <el-checkbox v-for="(v, k, index) in JSON.parse(question.question.options)" :value="k" :key="index">
                        <span class="question-prefix">{{ k }}.</span>
                        <span class="q-item-span-content">{{ v }}</span>
                    </el-checkbox>
                </el-checkbox-group>
            </div>
        </div>
        <div v-if="question.qs_type == '填空题'">
            <div class="q-title">
                <!-- {{ question.question.title }} -->
            </div>
            <div class="qs-content">
                {{ question.index + 1 }}、{{ question.question.title }}({{ question.qs_type }})
                <el-input type="text" v-model="answer.singleAnswer"
                    @change="checked => handleChange(checked, question.question.id, question.qs_type, question.score)"></el-input>
            </div>
        </div>
        <div v-if="question.qs_type == '简答题'">
            <div class="q-title">
                <!-- {{ question.question.title }} -->
            </div>
            <div class="qs-content">
                {{ question.index + 1 }}、{{ question.question.title }}({{ question.qs_type }})
                <el-input type="textarea" v-model="answer.singleAnswer"
                    @change="checked => handleChange(checked, question.question.id, question.qs_type, question.score)"></el-input>
            </div>
        </div>
    </div>

</template>

<script setup>
import { ref, defineProps } from "vue"
let question = defineProps(['question', 'qs_type', 'index', 'score'])
let emit = defineEmits(['handleChange'])
let answer = ref({
    singleAnswer: '',
    answerArray: []
})
function handleChange(checked, q_id, qs_type, score) {
    // console.log(checked, q_id);
    emit('handleChange', checked, q_id, qs_type, score)
}
</script>

<style scoped>


.qs-item {
    margin-top: 20px;
    padding-left: 10px;
    border-left: 2px solid #409eff;
    display: flex;
    flex-direction: column;
}

.qs-title {
    margin-bottom: 10px;
    font-size: 18px;
}

/* .el-radio-group{
    align-items: center;
  } */
.qs-qs-prefix {
    font-size: 16px;
}

.qs-content {
    font-size: 16px;
}
#container{
    margin: auto;
    width: 80%;
}
#container>div{
    margin-top: 10px;
}
</style>